﻿@page "/kanban/local-data"
@inherits SampleBaseComponent;

@using ej2_blazor_kanban_data_models
@using Syncfusion.Blazor.Kanban

<SampleDescription>
    <p> This sample demonstrates the way of data binding to Kanban component with array of objects (local data source). </p>
</SampleDescription>
<ActionDescription>
    <p>The Kanban supports binding data source to the board using the <code>DataSource</code> property that can be assigned with the array of objects or instances of <code>DataManager</code>.</p>
    <p>In this demo, the array of objects is assigned as the data source to the Kanban board.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfKanban KeyField="Status" DataSource="@cardData">
        <KanbanColumns>
            @foreach (ColumnModel item in columnData)
            {
                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField"></KanbanColumn>
            }
        </KanbanColumns>
        <KanbanCardSettings HeaderField="Id" ContentField="Summary"></KanbanCardSettings>
    </SfKanban>
</div>

@code{
    private List<KanbanDataModel> cardData = new KanbanDataModel().GetTasks();
    private List<ColumnModel> columnData = new List<ColumnModel>() {
        new ColumnModel(){ HeaderText= "To Do", KeyField= new List<string>() { "Open" } },
        new ColumnModel(){ HeaderText= "In Progress", KeyField= new List<string>() { "InProgress" } },
        new ColumnModel(){ HeaderText= "Testing", KeyField= new List<string>() { "Testing" } },
        new ColumnModel(){ HeaderText= "Done", KeyField=new List<string>() { "Close" } }
    };
}